<template>
  <div v-show="XianShi">
    点击编辑弹出来的框
    <br><input v-model="obj.status" type="checkbox" name="" id=""> <br>
    <input v-model="obj.title" type="text"> <br>
    <input v-model="obj.content" type="text"> <br>
    <button @click="YesHandel">确认修改</button>
    <button @click="XianShi = !XianShi">取消</button>
  </div>

  <ul>
    <li v-for="(item, index) in list" :key="item.id">
      <input type="checkbox" name="" id="" v-model="item.status">
      <p>id:{{ item.id }}</p>
      <p>title:{{ item.title }}</p>
      <p>内容：{{ item.content }}</p>
      <button @click="XiuGaiHandeler(item, index)">修改</button>
      <button @click="delHandeler(item, index)">删除</button>
    </li>
  </ul>
  <button @click="get">获取id</button>
</template>

<script setup>
import { ref } from 'vue';
import { ListAPI, DelAPI, XiuGaiAPI } from '../api/api'

//获取列表 
let list = ref([])
function loadlist() {
  ListAPI().then(r => {
    console.log(r.data);
    list.value = r.data
  })
}
loadlist()

// 删除
const delHandeler = (item, index) => {
  console.log(item, index);
  DelAPI(item.id).then(r => {
    console.log(r.data); // 每次要获取这个看一下
    loadlist()
  })
}

// 编辑，修改

let XianShi = ref(false)
let obj = ref({})
let id = ref('')
const XiuGaiHandeler = (item, index) => {
  XianShi.value = true
  obj.value = { ...item }

  console.log(obj.value);
  id.value = item.id
  console.log(id.value);
}
// 要通过一个事件，才能得到id的值
function get() {
  console.log(id.value);
}


// 确认修改
const YesHandel = () => {
  console.log(id.value, obj.title, obj.content, obj.status);
  
  XiuGaiAPI(id.value, obj.value.title, obj.value.content, obj.value.status).then(r => {
    console.log(r.data);
    XianShi.value = false
    loadlist()
  })

}

</script>
<style lang='css' scoped></style>